<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>个人博客</title>
<!-- 添加MDUI设计风格 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mdui@0.4.3/dist/css/mdui.min.css">
<style>
.button-container {
position: absolute;
bottom: -30px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
width: 40%; /* 设置容器宽度为图片宽度 */
}

  .button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #09a0e6;
    color: white;
    border: none;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    cursor: pointer;
    width: 100%;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
  }

  .container {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .image {
    display: block;
    max-width: 40%;
    height: auto;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    box-shadow 0.3s ease-in-out;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
  }

  .container:hover .button {
    opacity: 1;
  }

  .container:hover .image {
    transform: translateY(-10px);
  }
  .white{
    color : #ffffff;
  }
  .bigtext{
    font-size: 30px;
    color : #ffffff;
    text-decoration: none;
  }
  .bigtext2{
    font-size: 20px;
    color : #ffffff;
  }
  header {
    background-color: #09a0e6;
    color : #ffffff;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  footer {
    background-color: #09a0e6;
    color : #ffffff;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
</head>
<body>
    <script>
        // 判断用户是否已登录
        var isLogin = sessionStorage.getItem("isLogin") || localStorage.getItem("isLogin");
        var username = sessionStorage.getItem("username") || localStorage.getItem("username");

        if (isLogin !== "true") {
            alert("Please Login First!");
            window.location.href = "./login.html";
        }
        function showDropdown() {
            document.getElementById("dropdown").style.display = "block";
        }

        function hideDropdown() {
            document.getElementById("dropdown").style.display = "none";
        }
    </script>
    <header>
        <a class="bigtext" href="index.html" title="点击回到首页">我的网站</a>
    </header>

    <p class = "white">.</p>
    <p class = "white">.</p>

    <div class="container">
      <img class="image" src="img/img1.jpg" alt="Image" />
        <div class="button-container">
            <a href = "w1.html" class = "button">网上找的一张小鸟的照片</a>
        </div>
    </div>
<p class = "white">.</p>
<p class = "white">.</p>
<p class = "white">.</p>
<p class = "white">.</p>
<div class="container">
  <img class="image" src="img/img2.jpg" alt="Image" />
  <div class="button-container">
    <a href = "w2.html" class = "button">C++是什么——文章</a>
  </div>
</div>
<p class = "white">.</p>
<p class = "white">.</p>
<p class = "white">.</p>
<p class = "white">.</p>
<footer>
  <p class = "bigtext2">我的博客</p>
</footer>
</body>
</html>